<script lang="tsx">
import { defineComponent } from 'vue';
import { ElDivider, ElIcon } from 'element-plus';
import { useNamespace } from 'element-plus-extension';
import { useLoginForm } from './hooks/useLoginForm';

export default defineComponent({
  name: 'Login',
  setup() {
    const ns = useNamespace('login');

    const { renderForm } = useLoginForm();

    const renderLoginForm = () => {
      return <div class={ns.b('form')}>{renderForm()}</div>;
    };

    const renderOtherLoginTools = () => {
      return (
        <>
          <ElDivider direction="horizontal">其他登录方式</ElDivider>
          <div class={ns.be('footer', 'tools')}>
            <ElIcon size={40} color="rgb(50, 150, 250)">
              <svg viewBox="0 0 1024 1024">
                <path d="M849.92 51.2H174.08c-67.8656 0-122.88 55.0144-122.88 122.88v675.84c0 67.8656 55.0144 122.88 122.88 122.88h675.84c67.8656 0 122.88-55.0144 122.88-122.88V174.08c0-67.8656-55.0144-122.88-122.88-122.88z m-97.17248 383.4112c-1.00352 4.61824-3.61472 10.84928-7.22944 19.18976l-0.50688 0.50176c-21.69856 46.01344-77.66016 136.13568-77.66016 136.13568l-0.50688-0.50176-16.57344 28.43136h79.17056L578.33472 819.2l34.16064-136.63744h-62.09024l21.69856-90.624c-17.58208 4.1216-38.28224 9.85088-62.592 18.08384 0 0-33.15712 19.18976-95.24736-37.26848 0 0-41.89696-37.2736-17.58208-46.01344 10.34752-4.1216 50.23232-8.84736 81.78176-12.95872 42.3936-5.72928 68.81792-8.84736 68.81792-8.84736s-130.90816 2.10944-161.95584-3.10784c-31.04256-4.62336-70.4256-56.97024-78.6688-102.48192 0 0-12.95872-24.81664 27.9296-12.95872 40.39168 11.8528 210.18112 46.01344 210.18112 46.01344S324.2496 365.2864 309.78048 348.70784c-14.46912-16.57856-42.99776-90.01984-39.38304-135.13216 0 0 1.50528-11.35104 12.95872-8.23808 0 0 162.55488 74.5472 273.77664 114.93376 111.8208 41.40032 208.57344 62.09536 195.61472 114.33984z"></path>
              </svg>
            </ElIcon>
            <ElIcon size={38} color="rgb(40, 196, 69)">
              <svg viewBox="0 0 1024 1024">
                <svg viewBox="0 0 1024 1024">
                  <path d="M249.173333 335.872c0 10.922667 4.437333 21.504 11.946667 29.013333 7.509333 7.509333 18.432 11.946667 29.013333 11.946667 10.922667 0 21.504-4.437333 29.013333-11.946667 7.509333-7.509333 11.946667-18.432 11.946667-29.013333 0-10.922667-4.437333-21.504-11.946667-29.013333-7.509333-7.509333-18.432-11.946667-29.013333-11.946667-10.922667 0-21.504 4.437333-29.013333 11.946667C253.610667 314.368 249.173333 325.290667 249.173333 335.872L249.173333 335.872zM249.173333 335.872"></path>
                  <path d="M569.344 548.864c0 8.533333 3.413333 16.725333 9.557333 22.869333 5.802667 5.802667 14.336 9.557333 22.869333 9.557333 8.533333 0 16.725333-3.413333 22.869333-9.557333 5.802667-5.802667 9.557333-14.336 9.557333-22.869333 0-8.533333-3.413333-16.725333-9.557333-22.869333-5.802667-5.802667-14.336-9.557333-22.869333-9.557333-8.533333 0-16.725333 3.413333-22.869333 9.557333C573.098667 531.797333 569.344 540.330667 569.344 548.864L569.344 548.864zM569.344 548.864"></path>
                  <path d="M459.093333 335.872c0 10.922667 4.437333 21.504 11.946667 29.013333 7.509333 7.509333 18.432 11.946667 29.013333 11.946667 10.922667 0 21.504-4.437333 29.013333-11.946667 7.509333-7.509333 11.946667-18.432 11.946667-29.013333 0-10.922667-4.437333-21.504-11.946667-29.013333-7.509333-7.509333-18.432-11.946667-29.013333-11.946667-10.922667 0-21.504 4.437333-29.013333 11.946667C463.530667 314.368 459.093333 325.290667 459.093333 335.872L459.093333 335.872zM459.093333 335.872"></path>
                  <path d="M842.069333 27.306667 181.930667 27.306667C94.549333 27.306667 23.893333 98.304 23.893333 186.026667l0 659.456c0 87.722667 70.997333 158.72 158.378667 158.72l660.138667 0c87.381333 0 158.378667-70.997333 158.378667-158.72L1000.789333 186.026667C1000.448 98.304 929.450667 27.306667 842.069333 27.306667L842.069333 27.306667zM390.144 681.642667c-36.864 0-66.56-7.509333-103.765333-15.018667l-103.424 51.882667 29.696-89.088c-74.069333-51.882667-118.442667-118.442667-118.442667-200.021333 0-140.970667 133.461333-251.904 296.277333-251.904 145.749333 0 273.066667 88.746667 298.666667 207.872-9.557333-1.024-18.773333-1.706667-28.672-1.706667-140.629333 0-251.904 105.130667-251.904 234.496 0 21.504 3.413333 42.325333 9.216 62.122667C408.917333 681.301333 399.701333 681.642667 390.144 681.642667L390.144 681.642667zM827.050667 785.408l22.186667 74.069333-81.237333-44.373333c-29.696 7.509333-59.392 15.018667-88.746667 15.018667-140.970667 0-251.904-96.256-251.904-215.04 0-118.442667 110.933333-215.04 251.904-215.04 133.12 0 251.562667 96.597333 251.562667 215.04C930.816 681.642667 886.442667 741.034667 827.050667 785.408L827.050667 785.408zM827.050667 785.408"></path>
                  <path d="M730.794667 548.864c0 8.533333 3.413333 16.725333 9.557333 22.869333 5.802667 5.802667 14.336 9.557333 22.869333 9.557333 8.533333 0 16.725333-3.413333 22.869333-9.557333 5.802667-5.802667 9.557333-14.336 9.557333-22.869333 0-8.533333-3.413333-16.725333-9.557333-22.869333-5.802667-5.802667-14.336-9.557333-22.869333-9.557333-8.533333 0-16.725333 3.413333-22.869333 9.557333C734.208 531.797333 730.794667 540.330667 730.794667 548.864L730.794667 548.864zM730.794667 548.864"></path>
                </svg>
              </svg>
            </ElIcon>
          </div>
        </>
      );
    };

    return () => (
      <>
        <div class={ns.b()}>
          <div class={ns.b('bg')}></div>
          <div class={ns.b('box')}>
            <div class={ns.be('box', 'left')}>
              <div class={ns.be('box', 'left-bg')}></div>
            </div>
            <div class={ns.be('box', 'right')}>
              <div class={ns.b('content')}>
                <h2 class={ns.b('title')}>登录你的账户</h2>
                {renderLoginForm()}
              </div>
              <div class={ns.b('footer')}>{renderOtherLoginTools()}</div>
            </div>
          </div>
        </div>
      </>
    );
  }
});
</script>

<style scoped lang="scss">
@use 'element-plus/theme-chalk/src/mixins/mixins' as *;

.ex-login {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, rgb(142, 209, 252) 0%, rgb(153, 0, 239) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  &-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('@/assets/img/login-bg.png');
  }
  &-box {
    width: 800px;
    height: 500px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-shadow: var(--el-box-shadow-light);

    &__left {
      flex-shrink: 0;
      width: 50%;
      height: 100%;
      position: relative;
      background: linear-gradient(140deg, var(--el-color-primary-light-7) 0%, var(--el-color-primary) 100%);
      &-bg {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 140px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('@/assets/img/login-bg.svg');
      }
    }
    &__right {
      flex: auto;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 45px 30px;
    }

    @include res('xs') {
      width: 85%;
      height: fit-content;

      &__left {
        display: none;
      }
      &__right {
        padding: 24px 20px;
      }
      .ex-login-title {
        margin-bottom: 20px;
      }
      .el-divider--horizontal {
        margin-top: 5px;
      }
    }
  }
  &-content {
    flex: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  &-footer {
    margin-top: auto;
    &__tools {
      display: flex;
      align-items: center;
      gap: 20px;
      .el-icon {
        cursor: pointer;
      }
    }
  }
  &-title {
    margin-bottom: 40px;
  }
  &-form {
    //margin-top: auto;
  }
  :deep(.el-input-group__append) {
    padding: 1px 2px;
    background: transparent;
  }
  :deep(.ex-login-verify-image) {
    display: inline-block;
    width: 100px;
    height: calc(100% - 2px);
    cursor: pointer;
  }
  :deep(.ex-login-button) {
    width: 100%;
  }
}
</style>
